<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端新约选择测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 0;
            background: #f5f5f5;
        }
        
        .test-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 16px;
            text-align: center;
        }
        
        .test-content {
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .test-section {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .test-title {
            color: #2c3e50;
            margin-bottom: 16px;
            font-size: 18px;
            font-weight: 600;
        }
        
        .test-item {
            margin-bottom: 12px;
            padding: 12px;
            border: 1px solid #e4e7ed;
            border-radius: 8px;
            background: #f8f9fa;
        }
        
        .test-item h4 {
            margin: 0 0 8px 0;
            color: #1890ff;
        }
        
        .test-item p {
            margin: 0;
            color: #606266;
            line-height: 1.5;
        }
        
        .status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 8px;
        }
        
        .status.success {
            background: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }
        
        .status.warning {
            background: #fff7e6;
            color: #faad14;
            border: 1px solid #ffd591;
        }
        
        .status.error {
            background: #fff2f0;
            color: #ff4d4f;
            border: 1px solid #ffccc7;
        }
        
        .book-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-top: 16px;
        }
        
        .book-item {
            padding: 8px;
            border: 1px solid #e4e7ed;
            border-radius: 6px;
            text-align: center;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .book-item:hover {
            background: #e6f7ff;
            border-color: #91d5ff;
        }
        
        .book-name {
            font-weight: 500;
            font-size: 14px;
            margin-bottom: 2px;
        }
        
        .book-english {
            font-size: 12px;
            color: #7f8c8d;
        }
        
        .scroll-indicator {
            text-align: center;
            padding: 16px;
            color: #909399;
            font-size: 14px;
        }
        
        .scroll-indicator::before {
            content: "↓";
            display: block;
            font-size: 24px;
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="test-header">
        <h1>移动端新约选择测试</h1>
        <p>验证新约书卷在移动端的显示和选择功能</p>
    </div>
    
    <div class="test-content">
        <div class="test-section">
            <h2 class="test-title">问题诊断</h2>
            
            <div class="test-item">
                <h4>原始问题 <span class="status error">已修复</span></h4>
                <p>移动端书卷选择界面只显示旧约全书，新约全书部分不可见，出现滚动条但无法选择新约章节。</p>
            </div>
            
            <div class="test-item">
                <h4>修复方案 <span class="status success">已实施</span></h4>
                <p>1. 添加移动端滚动支持<br>
                   2. 优化侧边栏高度和布局<br>
                   3. 添加新约快速导航按钮<br>
                   4. 改善滚动体验和视觉反馈</p>
            </div>
        </div>
        
        <div class="test-section">
            <h2 class="test-title">新约书卷列表</h2>
            <p>以下是在移动端应该能够看到和选择的新约书卷：</p>
            
            <div class="book-list">
                <div class="book-item">
                    <div class="book-name">马太福音</div>
                    <div class="book-english">Matthew</div>
                </div>
                <div class="book-item">
                    <div class="book-name">马可福音</div>
                    <div class="book-english">Mark</div>
                </div>
                <div class="book-item">
                    <div class="book-name">路加福音</div>
                    <div class="book-english">Luke</div>
                </div>
                <div class="book-item">
                    <div class="book-name">约翰福音</div>
                    <div class="book-english">John</div>
                </div>
                <div class="book-item">
                    <div class="book-name">使徒行传</div>
                    <div class="book-english">Acts</div>
                </div>
                <div class="book-item">
                    <div class="book-name">罗马书</div>
                    <div class="book-english">Romans</div>
                </div>
                <div class="book-item">
                    <div class="book-name">哥林多前书</div>
                    <div class="book-english">1 Corinthians</div>
                </div>
                <div class="book-item">
                    <div class="book-name">哥林多后书</div>
                    <div class="book-english">2 Corinthians</div>
                </div>
                <div class="book-item">
                    <div class="book-name">加拉太书</div>
                    <div class="book-english">Galatians</div>
                </div>
                <div class="book-item">
                    <div class="book-name">以弗所书</div>
                    <div class="book-english">Ephesians</div>
                </div>
                <div class="book-item">
                    <div class="book-name">腓立比书</div>
                    <div class="book-english">Philippians</div>
                </div>
                <div class="book-item">
                    <div class="book-name">歌罗西书</div>
                    <div class="book-english">Colossians</div>
                </div>
                <div class="book-item">
                    <div class="book-name">帖撒罗尼迦前书</div>
                    <div class="book-english">1 Thessalonians</div>
                </div>
                <div class="book-item">
                    <div class="book-name">帖撒罗尼迦后书</div>
                    <div class="book-english">2 Thessalonians</div>
                </div>
                <div class="book-item">
                    <div class="book-name">提摩太前书</div>
                    <div class="book-english">1 Timothy</div>
                </div>
                <div class="book-item">
                    <div class="book-name">提摩太后书</div>
                    <div class="book-english">2 Timothy</div>
                </div>
                <div class="book-item">
                    <div class="book-name">提多书</div>
                    <div class="book-english">Titus</div>
                </div>
                <div class="book-item">
                    <div class="book-name">腓利门书</div>
                    <div class="book-english">Philemon</div>
                </div>
                <div class="book-item">
                    <div class="book-name">希伯来书</div>
                    <div class="book-english">Hebrews</div>
                </div>
                <div class="book-item">
                    <div class="book-name">雅各书</div>
                    <div class="book-english">James</div>
                </div>
                <div class="book-item">
                    <div class="book-name">彼得前书</div>
                    <div class="book-english">1 Peter</div>
                </div>
                <div class="book-item">
                    <div class="book-name">彼得后书</div>
                    <div class="book-english">2 Peter</div>
                </div>
                <div class="book-item">
                    <div class="book-name">约翰一书</div>
                    <div class="book-english">1 John</div>
                </div>
                <div class="book-item">
                    <div class="book-name">约翰二书</div>
                    <div class="book-english">2 John</div>
                </div>
                <div class="book-item">
                    <div class="book-name">约翰三书</div>
                    <div class="book-english">3 John</div>
                </div>
                <div class="book-item">
                    <div class="book-name">犹大书</div>
                    <div class="book-english">Jude</div>
                </div>
                <div class="book-item">
                    <div class="book-name">启示录</div>
                    <div class="book-english">Revelation</div>
                </div>
            </div>
        </div>
        
        <div class="test-section">
            <h2 class="test-title">测试步骤</h2>
            
            <div class="test-item">
                <h4>步骤1：打开移动端书卷选择</h4>
                <p>在移动端点击菜单按钮，打开书卷选择侧边栏。</p>
            </div>
            
            <div class="test-item">
                <h4>步骤2：查看旧约部分</h4>
                <p>确认旧约全书部分正常显示，包含所有旧约书卷。</p>
            </div>
            
            <div class="test-item">
                <h4>步骤3：滚动查看新约部分</h4>
                <p>向下滚动，确认新约全书部分可见，包含所有新约书卷。</p>
            </div>
            
            <div class="test-item">
                <h4>步骤4：使用快速导航</h4>
                <p>点击"新约"按钮，快速跳转到新约部分。</p>
            </div>
            
            <div class="test-item">
                <h4>步骤5：选择新约书卷</h4>
                <p>点击任意新约书卷，确认能够正常选择并关闭侧边栏。</p>
            </div>
        </div>
        
        <div class="scroll-indicator">
            向下滚动查看更多测试内容
        </div>
        
        <div class="test-section">
            <h2 class="test-title">预期结果</h2>
            
            <div class="test-item">
                <h4>✅ 新约书卷可见</h4>
                <p>新约全书部分应该完全可见，包含所有27卷新约书卷。</p>
            </div>
            
            <div class="test-item">
                <h4>✅ 滚动流畅</h4>
                <p>侧边栏滚动应该流畅，没有卡顿或跳跃。</p>
            </div>
            
            <div class="test-item">
                <h4>✅ 快速导航有效</h4>
                <p>点击"新约"按钮应该能够快速跳转到新约部分。</p>
            </div>
            
            <div class="test-item">
                <h4>✅ 选择功能正常</h4>
                <p>点击任意新约书卷应该能够正常选择并显示对应内容。</p>
            </div>
        </div>
    </div>
</body>
</html> 